<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="MobileOptimized" content="320">
    <meta http-equiv="cleartype" content="on">
    <meta name="robots" content="noindex,nofollow">
    <title>wolive</title>
    {load href="__libs__/jquery/jquery.min.js"/}
    {load href="__style__/index/chat.css"}
    {load href="__libs__/jquery/jquery.cookie.js"/}
    {load href="__libs__/jquery/jquery.form.min.js"/}
    {load href="__libs__/layui/css/layui.css"/}
    {load href="__libs__/layui/layui.js"/}
    {load href="__libs__/layer/skin/layer.css"/}
    {load href="__libs__/layer/layer.js"/}
    {load href="__libs__/push/pusher.min.js"/}
    <script src="__script__/main.js?v=3.16"></script>
    <script type="text/javascript" src="/assets/libs/webrtc/recorder.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ::-webkit-scrollbar {
            width: 6px
        }

        ::-webkit-scrollbar-track {
            background-color: #ddd
        }

        ::-webkit-scrollbar-track-piece {
            background-color: #f3f3f3;
            -webkit-border-radius: 3px
        }

        ::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border: solid 1px #c0c0c0;
            border-radius: 3px
        }

        ::-webkit-scrollbar-corner {
            background-color: #f3f3f3
        }

        ::-webkit-resizer {
            background-repeat: no-repeat;
            background-position: bottom right
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #bbb
        }

        .input-but {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;
        }

        .fileinput {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0px;
            right: 0px;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
        }

        .icon_gray {
            -webkit-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }

        .triangle {
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 8px solid #fff;
        }

        .hide {
            display: none;
        }

        .hidden {
            visibility: hidden;
        }

        .chatmsg {
            margin-bottom: 25px;
            position: relative;
            margin-top: 10px;
        }

        .tool_box {
            width: 280px;
            height: 195px;
            position: absolute;
            bottom: 150px;
            border: 1px solid #ddd;
            display: none;
            background: #fff;
        }

        .question {
            cursor: pointer;
        }

        .pswp__button--close {
            display: none !important;
            opacity: 0;
        }

    </style>
    <script>
        var visiter = '{$visiter}';
        var business_id = '{$business_id}';
        var record = '{$from_url}';
        record.replace("%23", "#");
        record.replace("%26", "&");
        var pic = '{$avatar}';
        var channel = '{$channel}';
        var visiter_id = '{$visiter_id}';
        var url = '{$url}';
        var gid = '{$groupid}';
        var pic = '{$avatar}';
        if (pic == "") {
            pic = "/assets/images/index/avatar-red2.png";
        }

        var service_id = 0;

        var wolive_connect = function () {
            pusher = new Pusher('{$app_key}', {
                encrypted: {$value}
                ,enabledTransports: ['ws']
                ,wsHost: '{$whost}'
                ,{$port}: {$wport}
            ,authEndpoint: '/admin/login/auth'
                ,disableStats: true
        });
            var channels = pusher.subscribe("cu" + channel);
            // 接收消息
            channels.bind('my-event', function (data) {
                var msg = '';
                msg += '<li class="chatmsg"><div style="position: absolute;left:8px;">';
                msg += '<img class="my-circle  se_pic" src="' + data.message.avatar + '" width="40px" height="40px"></div>';
                var picture_class = is_picture(data.message.content) ? ' no_border' : '';
                msg += "<div class='outer-left"+picture_class+"' style='right: 4%;'><div class='service'>";
                msg += "<pre>" + data.message.content + "</pre>";
                msg += "</div></div>";
                msg += "</li>";
                $(".chatmsg_notice").remove();
                $(".chatmsg_no").remove();
                $(".conversation").append(msg);
                var div = document.getElementById("wrap");
                div.scrollTop = div.scrollHeight;
            });

            // 认领通知
            channels.bind('cu_notice', function (data) {

                $("#img_head").attr("src", data.message.avatar);
                $("#services").text(data.message.nick_name);
                $(".chatmsg_notice").remove();
                $(".chatmsg").remove();
                $.cookie("services", data.message.service_id);
                service_id = data.message.service_id;
                getquestion(data.message.business_id);
                getdata();
                getlisten(data.message.service_id);
            });

            // 接受视频请求
            channels.bind("video", function (data) {
                var msg = data.message;
                var cha = data.channel;
                var avatar = data.avatar;
                var username = data.username;
                layer.open({
                    type: 1,
                    title: '申请框',
                    area: ['260px', '160px'],
                    shade: 0.01,
                    fixed: true,
                    btn: ['接受', '拒绝'],
                    content: "<div style='position: absolute;left:20px;top:15px;'><img src='" + avatar + "' width='40px' height='40px' style='border-radius:40px;position:absolute;left:5px;top:5px;'><span style='width:100px;position:absolute;left:70px;top:5px;font-size:13px;overflow-x: hidden;'>" + username + "</span><div style='width:90px;height:20px;position:absolute;left:70px;top:26px;'>" + msg + "</div></div>",
                    yes: function () {
                        layer.closeAll('page');
                        var falg = window.location.protocol;
                        if (falg == 'https:') {
                            layer.open({
                                type: 2,
                                title: 'video',
                                area: ['380px', '300px'],
                                shade: false,
                                resize: true,
                                content: 'https://rtc.laychat.net/call/' + cha
                            });
                        } else {
                            var iWidth = 400;  // 窗口宽度
                            var iHeight = 300; // 窗口高度
                            var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
                            var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
                            win = window.open("https://rtc.laychat.net/call/" + cha, "_blank", "toolbar=no,directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",alwaysRaised=yes");
                        }
                    },
                    btn2: function () {
                        var sid = $.cookie('services');
                        $.ajax({
                            url: '/admin/event/refuse',
                            type: 'post',
                            data: {id: sid}
                        });

                        layer.closeAll('page');
                    }
                });
            });

            // 接受拒绝视频请求
            channels.bind("video-refuse", function (data) {
                layer.alert(data.message);
            });

            // 问候语
            channels.bind('first_word', function (data) {
                var msg = '';
                msg += '<li class="chatmsg"><div style="position: absolute;left:3px;top:14px;">';
                msg += '<img class="my-circle  se_pic" src="' + data.message.avatar + '" width="40px" height="40px"></div>';
                msg += "<div class='outer-left'  style='right:4%;top:13px;'><div class='service'>";
                msg += "<pre>" + data.message.content + "</pre>";
                msg += "</div></div>";
                msg += "</li>";

                $(".conversation").append(msg);

                var div = document.getElementById("wrap");
                div.scrollTop = div.scrollHeight;
            });


            if ($.cookie('services')) {
                getlisten($.cookie('services'))
            }

            function getlisten(chas) {

                var channels = pusher.subscribe("se" + chas);

                //通知游客 客服离线
                channels.bind('logout', function (data) {
                    $("#img_head").addClass("icon_gray");

                });

                //表示客服在线
                channels.bind("geton", function (data) {
                    $("#img_head").removeClass("icon_gray");

                });
            }


            pusher.connection.bind('state_change', function (states) {
                if (states.current == 'unavailable' || states.current == "disconnected" || states.current == "failed") {
                    $.cookie("cid", "");
                    var id = $.cookie("services");
                    if (id) {
                        pusher.unsubscribe("se" + id);
                    }
                    pusher.unsubscribe("cu" + channel);

                    if (typeof pusher.isdisconnect == 'undefined') {
                        pusher.isdisconnect = true;
                        pusher.disconnect();
                        delete pusher;
                        window.setTimeout(function () {
                            wolive_connect();
                        }, 1000);
                    }
                }
            });
        }

    </script>
</head>
<body style="background: #fff;">
<div class=""
     style="display: block; height: 100%; width: 100%;top: 0px; bottom: 0px; left: 0px; margin-top: 0px; margin-left: 0px;">
    <div id="wolive-Chat" class="">

        <div class="header" style="background: rgb(19, 201, 203);width: 100%;height: 70px;position: relative;">

            <div class="infoBar" style="position: absolute;">
                <img id="img_head" src="/assets/images/index/workerman_logo.png"
                     style="width: 50px;border-radius: 50px;position: absolute;left: 10px;top: 10px;">
                <div style="position: absolute;left: 70px;top: 22px;">
                    <p>
                        <span id='services' style="display: inline-block;width: 200px;overflow-x: hidden;"></span>
                    </p>

                    <p class="" id=""></p>
                </div>
            </div>
        </div>

        <div class="chatMain" style="width:100%;">
            <div>
                <ul id="wrap" class="conversation"
                    style="width:100%;height: 280px;background-color: #fff;padding:0px;overflow-y: auto;left: 0;">

                </ul>
            </div>

            <div class="tool_box">

                <div class="wl_faces_content">

                    <div class="wl_faces_main">

                    </div>
                </div>

            </div>

            <div id="footer" style="position: absolute;bottom: 0;width: 100%;height: 150px;">
                <div class="msg-toolbar" style="width: 100%;margin:0 auto;background: #fff;border-top:1px solid #ddd;">
                    <a id="face_icon" href="javascript:" onclick="faceon()"><i class="layui-icon"
                                                                               style="font-size: 20px;">&#xe60c;</i></a>
                    {if $video == 'open'}
                    <a id="video" style="cursor: pointer;" onclick="getvideo()"><i class="layui-icon"
                                                                                   style="font-size: 20px;">&#xe6ed;</i></a>
                    {/if}
                    {if $audio == 'open'}
                    <a onclick="getaudio()"><i class="layui-icon" style="font-size: 20px;cursor: pointer;">&#xe688;</i></a>
                    {/if}

                    <a id="images" href="javascript:">
                        <form id="picture" enctype="multipart/form-data" style="width: 20px;height: 24px;">
                            <div class="layui-box input-but  size">
                                <i class="layui-icon" style="font-size: 22px;">&#xe60d;</i>
                                <input type="file" name="upload" class="fileinput" onchange="put()"/>
                            </div>
                        </form>
                    </a>

                    <a id="files" href="javascript:">
                        <form id="file" enctype="multipart/form-data" style="width: 20px;height: 24px;">
                            <div class="layui-box input-but  size">
                                <i class="layui-icon" style="font-size: 20px;">&#xe61d;</i>
                                <input type="file" name="folder" class="fileinput" onchange="putfile()"/>
                            </div>
                        </form>
                    </a>
                    <a onmouseover="info()" id="paste" style="position:absolute; right:2px;top:5px;cursor: pointer;"><i
                            style="display:inline-block;width:15px;height:15px;background: url('/assets/images/index/cut.png');background-size: 100%;"></i>
                        怎样分发截图？</a>
                </div>

                <div class="msg-input">
                    <div style="width: 100%;margin:0 auto;">
                    <textarea id="text_in" class="edit-ipt"
                              style="font-weight: normal; font-size: 16px; overflow-x: hidden;overflow-y:auto;word-break: break-all; font-style: normal; outline: none;width: 100%;height: 76px;border:none;padding: 10px;"
                              contenteditable="true" hidefocus="true" tabindex="0"></textarea>
                    </div>
                </div>

                <div class="msg-toolbar-footer grey12" style="height: 29px;right: 4px;">
                    <a onclick="send()" class="layui-btn"
                       style="background:#d41010;position: absolute;left:0;top:0;width: 80%;height: 35px;text-align: center;line-height: 36px;">
                        发送
                    </a>
                    <a id="showinfo"
                       style="position: absolute;right: 0;top: 0;width: 20%;height: 35px;background: #d41010;text-align: center; border-left: 1px solid #FFF;cursor: pointer;">
                        <i class='triangle' style="margin-top: 15px;"></i>
                    </a>
                </div>
                <!-- 浮层 -->
                <div id='fuceng' class="hide"
                     style="background: #e2e2e2;width:270px;height: 80px;position: absolute;bottom: 10px;right: 6px;z-index: 9999;border-radius: 8px;">
                    <ul style="display: inline-block;width: 100%;height: 30px;line-height: 40px;text-align: center;">
                        <li onclick="choose(this)" style="cursor: pointer;" name='1'><i id='type1' class="layui-icon">
                            &#xe605;</i><span>按Enter键发送消息，Ctrl+Enter换行</span></li>
                        <li onclick="choose(this)" style="cursor: pointer;" name='2'><i id='type2'
                                                                                        class="layui-icon hidden">
                            &#xe605;</i><span>按Ctrl+Enter键发送消息，Enter换行</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<audio src="" id="newMsgAudio" style="display:none"></audio>
<script type="text/javascript" src="/assets/js/layer/layerchat.js?v=5.1.1"></script>

<script>


    document.getElementById("wrap").onscroll = function () {
        var t = document.getElementById("wrap").scrollTop;
        if (t == 0) {
            console.log($.cookie("cid"));
            if ($.cookie("cid") != "") {
                getdata();
            }

        }
    }

    function getOs() {
        var OsObject = "";
        if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
            return "Firefox";
        }
    }


    //获取qq截图的图片

    var imgReader = function (item) {
        var blob = item.getAsFile(),
            reader = new FileReader();
        // 读取文件后将其显示在网页中
        reader.onload = function (e) {
            var msg = '';
            msg += '<img onclick="getbig(this)"  src="' + e.target.result + '">';

            if (getOs() != "Firefox") {
                var time;

                if ($.cookie("itime") == "") {
                    var myDate = new Date();
                    time = myDate.getHours() + ":" + myDate.getMinutes();
                    var timestamp = Date.parse(new Date());
                    $.cookie("itime", timestamp / 1000);

                } else {

                    var timestamp = Date.parse(new Date());
                    var lasttime = $.cookie("itime");
                    if ((timestamp / 1000 - lasttime) > 30) {
                        var myDate = new Date(timestamp);
                        time = myDate.getHours() + ":" + myDate.getMinutes();
                    } else {
                        time = "";
                    }

                    $.cookie("itime", timestamp / 1000);
                }

                var str = '';
                str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                str += '<div style="position: absolute;top: 29px;right: 6px;"><img  class="my-circle cu_pic" src="' + pic + '" width="40px" height="40px"></div>';
                var picture_class = is_picture(msg) ? ' no_border' : '';
                str += "<div class='outer-right"+picture_class+"' style='right:16%;'><div class='customer'>";
                str += "<pre>" + msg + "</pre>";
                str += "</div></div>";
                str += "</li>";

                $(".conversation").append(str);
                var div = document.getElementById("wrap");
                div.scrollTop = div.scrollHeight;

                $.ajax({
                    url: "/admin/event/chat",
                    type: "post",
                    data: {visiter_id: visiter_id, content: msg, business_id: business_id, avatar: pic, record: record},
                    dataType: 'json',
                    success: function (res) {
                        switch (res.code) {
                            case 0:
                                return;
                            case 4:
                                layer.open({
                                    title:'提示框',
                                    area: ['300px', '180px'],
                                    content:res.msg,
                                    btn:['是','否'],
                                    yes:function(){
                                        location.reload();
                                    },
                                    btn2:function(){
                                        layer.close();
                                    }
                                });
                                break;
                            default:
                                layer.msg(res.msg,{icon:2});
                        }
                    }
                });
            }
        };
        // 读取文件
        reader.readAsDataURL(blob);
    };
    document.getElementById('text_in').addEventListener('paste', function (e) {
        // 添加到事件对象中的访问系统剪贴板的接口
        var clipboardData = e.clipboardData,
            i = 0,
            items, item, types;

        if (clipboardData) {
            items = clipboardData.items;
            if (!items) {
                return;
            }
            item = items[0];
            // 保存在剪贴板中的数据类型
            types = clipboardData.types || [];
            for (; i < types.length; i++) {
                if (types[i] === 'Files') {
                    item = items[i];
                    break;
                }
            }
            // 判断是否为图片数据
            if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
                imgReader(item);
            }
        }
    });


    var types = function () {
        if ($.cookie('type') == 1) {
            //快捷键
            document.getElementById("text_in").onkeydown = function (e) {
                e = e || window.event;

                if (e.ctrlKey && e.keyCode == 13) {
                    $("#text_in").append("<div><br/></div>");
                    var o = document.getElementById("text_in").lastChild;
                    var textbox = document.getElementById('text_in');
                    var sel = window.getSelection();
                    var range = document.createRange();
                    range.selectNodeContents(textbox);
                    range.collapse(false);
                    if (o) {
                        range.setEndAfter(o);
                        range.setStartAfter(o);
                    }

                    sel.removeAllRanges();
                    sel.addRange(range);

                }

                if (!e.ctrlKey && e.keyCode == 13) {
                    var a = $('#text_in').val();
                    var str = a.replace(/(^\s*)|(\s*$)/g, "");
                    if (!str) {
                        layer.msg('内容不能为空', {icon: 3});
                        $('#text_in').val('');
                        return false;
                    }

                    send();
                    e.returnValue = false;
                    return false;
                }
            };

        } else {

            document.getElementById("text_in").onkeydown = function (e) {
                e = e || window.event;
                if (e.ctrlKey && e.keyCode == 13) {
                    if ($('#text_in').val() == "" || $.cookie("service") == '') {
                        layer.msg('请输入信息');
                    } else {
                        send();
                    }
                }
            }
        }
    }

    function info() {
        layer.tips("将您剪切好的图片粘贴到输入框即可", "#paste", {tips: [1, '#9EC6EA'], area: '215px'});
    }


    function showDiv() {
        $("#fuceng").toggleClass('hide');
    }

    $(function () {

        $("#showinfo").on('click', function () {

            showDiv();

            $(document).one("click", function () {

                $("#fuceng").addClass('hide');

            });
            event.stopPropagation();//阻止事件向上冒泡
        });

        $("#fuceng").click(function (event) {
            3
            event.stopPropagation();//阻止事件向上冒泡

        });
    });

    function choose(obj) {

        $(obj).children('i').removeClass('hidden');
        $(obj).siblings('li').children('i').addClass('hidden');
        var type = $(obj).attr('name');
        $.cookie('type', type);
        $("#fuceng").addClass('hide');
        types();
    }

    function getclose() {
        var t = window.parent;
        t.wolive.narrow();
    }

    // 视频通话
    var getvideo = function () {

        var times = (new Date()).valueOf();
        if ($.cookie('services')) {
            var sid = $.cookie('services');
            //申请
            $.ajax({
                url: '/admin/event/apply',
                type: 'post',
                data: {id: sid, channel: times, avatar: pic, name: visiter, visiter_id: visiter_id},
                dataType: 'json',
                success: function (res) {
                    if (res.code != 0) {
                        layer.msg(res, {icon: 2, offset: '20px'});
                    }
                }
            });
            var iWidth = 400;  // 窗口宽度
            var iHeight = 300; // 窗口高度
            var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
            var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
            window.open("https://rtc.laychat.net/call/" + times, "_blank", "toolbar=no,directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",alwaysRaised=yes");
        } else {

            layer.msg("还未连接客服！不能使用该功能");
        }
    }


    var getaudio = function () {

        //音频先加载
        var audio_context;
        var recorder;
        var wavBlob;
        //创建音频
        try {
            // webkit shim
            window.AudioContext = window.AudioContext || window.webkitAudioContext;
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia;
            window.URL = window.URL || window.webkitURL;

            audio_context = new AudioContext;

            if (!navigator.getUserMedia) {
                console.log('语音创建失败');
            };
        } catch (e) {
            show_user_media_error(e);
            return;
        }
        navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) {
            var input = audio_context.createMediaStreamSource(stream);
            recorder = new Recorder(input);

            var falg = window.location.protocol;
            if (falg == 'https:') {
                recorder && recorder.record();

                //示范一个公告层
                layui.use(['jquery', 'layer'], function () {
                    var layer = layui.layer;

                    layer.msg('录音中...', {
                        icon: 16
                        , shade: 0.01
                        , skin: 'layui-layer-lan'
                        , time: 0 //20s后自动关闭
                        , btn: ['发送', '取消']
                        , yes: function (index, layero) {
                            //按钮【按钮一】的回调
                            recorder && recorder.stop();
                            recorder && recorder.exportWAV(function (blob) {
                                wavBlob = blob;
                                var fd = new FormData();
                                var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
                                fd.append('wavName', wavName);
                                fd.append('file', wavBlob);

                                var xhr = new XMLHttpRequest();
                                xhr.onreadystatechange = function () {
                                    if (xhr.readyState == 4 && xhr.status == 200) {
                                        jsonObject = JSON.parse(xhr.responseText);

                                        voicemessage = '<div style="cursor:pointer;text-align:center;" onclick="getstate(this)" data="play"><audio src="' + jsonObject.data.src + '"></audio><i class="layui-icon" style="font-size:25px;">&#xe652;</i><p>音频消息</p></div>';

                                        var sid = $('#channel').text();

                                        var time;

                                        var sdata = $.cookie('cu_com');

                                        if (sdata) {
                                            var json = $.parseJSON(sdata);
                                            var img = json.avater;

                                        }

                                        if ($.cookie("itime") == "") {
                                            var myDate = new Date();
                                            time = myDate.getHours() + ":" + myDate.getMinutes();
                                            var timestamp = Date.parse(new Date());
                                            $.cookie("itime", timestamp / 1000);

                                        } else {

                                            var timestamp = Date.parse(new Date());
                                            var lasttime = $.cookie("itime");
                                            if ((timestamp / 1000 - lasttime) > 30) {
                                                var myDate = new Date(timestamp);
                                                time = myDate.getHours() + ":" + myDate.getMinutes();
                                            } else {
                                                time = "";
                                            }

                                            $.cookie("itime", timestamp / 1000);
                                        }

                                        var str = '';
                                        str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                                        str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle cu_pic" src="' + pic + '" width="50px" height="50px"></div>';
                                        str += "<div class='outer-right'><div class='customer'>";
                                        str += "<pre>" + voicemessage + "</pre>";
                                        str += "</div></div>";
                                        str += "</li>";

                                        $(".conversation").append(str);
                                        $("#text_in").empty();

                                        var div = document.getElementById("wrap");
                                        div.scrollTop = div.scrollHeight;

                                        $.ajax({
                                            url: "/admin/event/chat",
                                            type: "post",
                                            data: {
                                                visiter_id: visiter_id,
                                                content: voicemessage,
                                                business_id: business_id,
                                                avatar: pic,
                                                record: record
                                            },
                                            dataType: 'json',
                                            success: function (res) {
                                                switch (res.code) {
                                                    case 0:
                                                        return;
                                                    case 4:
                                                        layer.open({
                                                            title:'提示框',
                                                            area: ['300px', '180px'],
                                                            content:res.msg,
                                                            btn:['是','否'],
                                                            yes:function(){
                                                                location.reload();
                                                            },
                                                            btn2:function(){
                                                                layer.close();
                                                            }
                                                        });
                                                        break;
                                                    default:
                                                        layer.msg(res.msg,{icon:2});
                                                }
                                            }
                                        });
                                    }
                                };
                                xhr.open('POST', '/admin/event/uploadVoice');
                                xhr.send(fd);
                            });
                            recorder.clear();
                            layer.close(index);
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            recorder && recorder.stop();
                            recorder.clear();
                            audio_context.close();
                            layer.close(index);
                        }
                    });

                });
            } else {

                layer.msg('音频输入只支持https协议！');

            }

        }).catch(function (e) {
            show_user_media_error(e);
        });

    }


</script>



<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe.
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides.
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<!-- Core CSS file -->
<link rel="stylesheet" href="/assets/libs/photoswipe/photoswipe.css">

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite,
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="/assets/libs/photoswipe/default-skin.css">

<!-- Core JS file -->
<script src="/assets/libs/photoswipe/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="/assets/libs/photoswipe/photoswipe-ui-default.min.js"></script>


</body>

</html>

